<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.min.css" rel="stylesheet"/>
  <!--播放器脚本文件-->
  <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.7.2/tcplayer.v4.7.2.min.js"></script>

</head>
<body>
<div id="app">

  <video id="player-container-id" width="900" height="500" preload="auto" playsinline webkit-playsinline style="float: left">

  </video>

  <div style="float: left">
    <div id="scrolldIv" style="background-color: darkcyan;width: 300px;height: 475px;overflow: auto">
      <p v-for="msg in messageList">{{msg}}</p>
    </div>
    <input type="text" v-model="message"><button @click="send">发送</button>
  </div>
</div>


<script>
  new Vue({
    el:'#app',
    data:{
      url:'webrtc://team2.wyrgzc.love/shanpay/admin',
      message:'',
      websocket:null,
      messageList:[]
    },
    methods:{
      send(){
        this.websocket.send(this.message)
        this.message.remove()
      }
    },
    mounted(){
      var player = TCPlayer('player-container-id', {autoplay:true}); // player-container-id 为播放器容器 ID，必须与 html 中一致
      player.src(this.url); // url 播放地址

      var name="user"+Math.floor(Math.random()*10000)

      this.websocket = new WebSocket("ws://hbn5jh.natappfree.cc/chatroom/"+name)

      var that = this
      this.websocket.onmessage = function (res){
        var message=res.data

        that.messageList.push(message)
      }
    }

  })
</script>

</body>
</html>
